<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--   <link rel="StyleSheet" href="../../css/mypetstore.css" type="text/css" media="screen"/>-->
</head>
<body>
<div th:replace="jsp/common/top"></div>
  <div id="Content">
      <div id="BackLink">
          <a href="mainForm">Return to Main Menu</a>
      </div>

      <div id="Catalog">
          <form action="/account/signin" method="post">
              <p>Please enter your username and password.</p>
                          <span th:if="${signOnMsg!=null}">
                              <p style="color: red;" th:text="${signOnMsg}"></p>
                          </span>

              <p>
                  Username:<input type="text" name="username"> <br/>
                  Password:<input type="password" name="password"><br/>
<!--                  Verification Code:<input type="text" id="code2" name="checkCode2">-->
                  <!--验证码-->
                  <!--                <img alt="验证码" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>-->
              </p>
              <input type="submit" value="Login">
          </form>

          Need a user name and password?
          <a href="/account/newAccount">Register Now!</a>
      </div>  </div>
</body>
</html>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var imagecode = document.getElementById("imagecode");

        // 添加点击事件监听器
        imagecode.addEventListener("click", function () {
            // 创建新的URL以避免缓存
            var currentSrc = imagecode.src;
            var separator = currentSrc.indexOf("?") !== -1 ? "&" : "?";
            var newSrc = currentSrc + separator + "timestamp=" + new Date().getTime();

            // 更新验证码图片的src属性
            imagecode.src = newSrc;
        });
    });
</script>